<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>

    // 节流又叫函数节流（throttle）：指当持续触发事件时，保证一定时间段内只调用一次事件处理函数

// 函数防抖：是n秒内只执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间.

// 函数节流：是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。


var num = 1;
        const seckill = () => {
            console.log('点击了按钮' + num++)
        }
        function throttle(callback, delay) {
            var timer, begin = new Date();
            return function () {
                //记录事件触发时的时间
                var current = new Date();
                //清除上一次定时器任务
                clearTimeout(timer);
                //判断距上一次触发是否已过了delay的时间
                if (current - begin >= delay) {
                    callback();
                    begin = current;
                } else {
                    timer = setTimeout(() => {
                        callback();
                    }, delay);
                }
            }
        }
        //点击提交按钮
        let btn = document.getElementById('btn');
        //调用方法（ 1s内只允许一次操作）
        btn.addEventListener('click', throttle(seckill, 1000));

</script>